<template>
	<view class="this_page" style="padding-bottom: 104rpx;">
		<view class="w-706 h-400" style="margin: 0 auto;">
			<image src="../../static/img_yanglaoquanyika@2x.png" style="width: 100%;" mode="widthFix"></image>
		</view>
		<view class="card_out" style="margin-top: 48rpx;">
			<view class="card_in" style="height: 400rpx;">
				<view class="card_text">
					<text class="text_big">请填写持卡人信息</text>
					<view class="flex-between card_bottom">
						<text class="text_sm" style="color: #333333;">姓名</text>
						<view class="uni-form-item uni-column">
								<input v-model="name" class="uni-input text_sm" style="color:#A96622;text-align: right;" placeholder-style="color:#C3915F" placeholder="与证件保持一致" />
						</view>
						
					</view>
					<view class="flex-between card_bottom">
						<text class="text_sm" style="color: #333333;">身份证号</text>
						<view class="uni-form-item uni-column">
								<input v-model="id_card" class="uni-input text_sm" style="color:#A96622;text-align: right;" placeholder-style="color:#C3915F" placeholder="与证件保持一致" />
						</view>
						
					</view>
					<view class="flex-between " style="height: 72rpx;margin-top: 16rpx;width: 100%;" @click="showSelect()">
						<text class="text_sm" style="color: #333333;">居住城市</text>
						<view class="uni-form-item uni-column">
								<text class="uni-input text_sm" style="color:#A96622;text-align: right;" >{{address_show}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="card_out" style="margin-top: 48rpx;">
			<view class="card_in" >
				<view class="card_text">
					<text class="text_big">权益手机绑定</text>
					<view class="flex-between card_bottom">
						<view class="uni-form-item uni-column">
								<input v-model="mobile" type="number" class="uni-input text_sm" style="color:#A96622;" placeholder-style="color:#C3915F" placeholder="请输入手机号" />
						</view>
						
					</view>
					<view class="flex-between " style="height: 72rpx;margin-top: 16rpx;width: 100%;">
						<view class="uni-form-item uni-column">
								<input v-model="verify" type="number" class="uni-input text_sm" style="color:#A96622;" placeholder-style="color:#C3915F" placeholder="请输入6位数验证码" />
						</view>
						

						<text class="text_sm" @click="getVerificationCode"  style="color: #333333;">{{ countdown > 0 ? `${countdown}秒后重新获取` : '获取验证码' }}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="card_out" style="margin-top: 48rpx;">
			<view class="card_in" style="padding-bottom: 40rpx;">
				<view class="card_text">
					<text class="text_big">请上传身份证</text>
					<view style="width: 622rpx;height: 68rpx;;margin: 40rpx auto 0 auto;position: relative;" >
						<view style="width: 24rpx;height: 24rpx;position: absolute;top: 4rpx;left: 0;"><image src="../../static/ic_zhuyi@3x.png" style="width: 100%;display: block;" mode="widthFix"></image></view>
						<text style="color: #666666;line-height: 34rpx;font-size: 24rpx;position: absolute;left: 32rpx;">请确保二代身份证有效，并且头像文字清晰，四角对齐，无反光，无遮挡。</text>
					</view>
				</view>
				<view style="width: 512rpx;height: 344rpx;margin: 38rpx auto 20rpx auto;position: relative;" @click="choose1()">
					<image style="position: absolute;top: 0;left: 0;width: 100%;" mode="widthFix" src="../../static/img_shenfenzhengbeijing@3x.png">
					</image>
					<image style="position: absolute;top: 38rpx;left: 38rpx;width: 436rpx;z-index: 3;" mode="widthFix" :src="zm"></image>
				</view>
				<view class="" style="text-align: center;position: relative;width: 100%;height: 52rpx;">
					<view style="position: absolute;top: 0;margin: auto;text-align: center;width: 100%;"><text style="color: #A96622;font-size: 24rpx;line-height: 44rpx;margin: auto">点击上传身份证原件人像面</text></view>
					<view style="width: 100%;height: 16rpx;margin: -8rpx auto auto auto;
					position: absolute;top: 36rpx;">
					<view style="width: 320rpx;height: 16rpx;margin: auto;opacity: 0.3;border-radius: 8rpx;background-color: #EBB37B;"></view>
					</view>
				</view>
				
				<view style="width: 512rpx;height: 344rpx;margin: 58rpx auto 20rpx auto;position: relative;" @click="choose2()">
					<image style="position: absolute;top: 0;left: 0;width: 100%;" mode="widthFix" src="../../static/img_shenfenzhengbeijing@3x.png">
					</image>
					<image style="position: absolute;top: 38rpx;left: 38rpx;width: 436rpx;z-index: 3;" mode="widthFix" :src="bm"></image>
				</view>
				<view class="" style="text-align: center;position: relative;width: 100%;height: 52rpx;">
					<view style="position: absolute;top: 0;margin: auto;text-align: center;width: 100%;"><text style="color: #A96622;font-size: 24rpx;line-height: 44rpx;margin: auto">点击上传身份证原件国徽面</text></view>
					<view style="width: 100%;height: 16rpx;margin: -8rpx auto auto auto;
					position: absolute;top: 36rpx;">
					<view style="width: 320rpx;height: 16rpx;margin: auto;opacity: 0.3;border-radius: 8rpx;background-color: #EBB37B;"></view>
					</view>
				</view>
			</view>
		</view> -->
		<view :style="{opacity:tmd}" @click="submitall()">
		<view class="w-480 h-92" style="margin: 80rpx auto 20rpx auto;border-radius: 49rpx;text-align: center;
		background:linear-gradient(to right,#FE515F 0%,#FB2D19 20%,#FB2D19 80%,#FC7916 100%) ;">
		<text style="line-height: 92rpx;font-size: 32rpx;color: #FFFFFF" >提交</text>
		</view>
		</view>
		<view style="width: 662rpx;height: 64rpx;;margin: 20rpx auto 0 auto;position: relative;" >
			<view @click="agree(1)" style="width: 24rpx;height: 24rpx;position: absolute;top: 4rpx;left: 0;"><image src="../../static/ic_weixuan@3x.png" style="width: 100%;display: block;" mode="widthFix"></image></view>
			<view @click="agree(0)" v-show="agree_v" style="width: 24rpx;height: 24rpx;position: absolute;top:  4rpx;left: 0;"><image src="../../static/ic_xuanzhong@3x.png" style="width: 100%;display: block;z-index: 3;" mode="widthFix"></image></view>
			<view v-show="cf" style="color: #ffffff;line-height: 32rpx;font-size: 20rpx;position: absolute;left: 34rpx;top: -16rpx;border: #666666 1rpx solid;background-color: #666666;z-index: 2;padding: 10rpx;">
				<<请先确认协议
				</view>
			<text style="color: #666666;line-height: 32rpx;font-size: 20rpx;position: absolute;left: 34rpx;color: #999999;">
				未绑定手机号提交后将自动生成账号，且代表您已阅读并同意
				<text style="color: #A96622;">
					<text @click="pt()">《平台服务协议》</text>、<text @click="ys()">《隐私协议》</text>
					</text>
				</text>
		</view>
		
		<uni-popup ref="popup" type="bottom" :is-mask-click='false'>
			<view style="width: 750rpx;height: 100vh;">
				<view class="w-580 h-908 centered" style="margin: auto;">
					<view class="w-580 h-744">
						<image style="width: 100%;" mode="widthFix" src="../../static/jihuochenggongtanchuang@3x.png"></image>
					</view>
					<view class="w-60 h-60" style="margin: 104rpx auto auto auto;" @click="close()">
						<image style="width: 100%;" mode="widthFix" src="../../static/ic_guanbi@3x.png"></image>
					</view>
				</view>
			</view>
			
		</uni-popup>
		<select-address
		  ref="address"
		  :value="show_address"
		  @getAddress="getAddress"
		  @close="show_address = false"
		/>
	</view>
	
</template>

<script>
	import SelectAddress from '@/components/address/SelectAddress.vue'
	export default {
		components: {
		  SelectAddress,
		  
		},
		data() {
			
			return {
				show_address: false,
				address_show:'选择居住城市',
				tmd:0.5,
				agree_v:0,
				zm:"../../static/img_renxiangmian@3x.png",
				bm:"../../static/img_guohuimian@3x.png",
				countdown: 0,
				intervalId: 0,
				id_card: '',
				name: '',
				verify: '',
				mobile: '',
				id: 0,
				jhm: 0,
				cf: 0,
			}
		},
		onLoad(opt){
			console.log(opt)
			this.id=opt.id;
			this.jhm=opt.jhm;
		},
		methods: {
			async submitall(){
				if(this.agree_v){
					if(this.name==''){
						uni.showToast({
							title:"请填写姓名",
							duration:2000,
							icon:'none'
						})
						return
					}
					if(this.id_card==''){
						uni.showToast({
							title:"请填写身份证",
							duration:2000,
							icon:'none'
						})
						return
					}
					if(this.address_show=='选择居住城市'){
						uni.showToast({
							title:"请选择居住城市",
							duration:2000,
							icon:'none'
						})
						return
					}
					if(this.mobile==''){
						uni.showToast({
							title:"请填写手机号",
							duration:2000,
							icon:'none'
						})
						return
					}
					if(this.verify==''){
						uni.showToast({
							title:"请填写验证码",
							duration:2000,
							icon:'none'
						})
						return
					}
					let idreg = /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
					
					if (!idreg.test(this.id_card)) { 
						uni.showToast({
							title:"请填写正确身份证",
							duration:2000,
							icon:'none'
						})
						return
						}
						const res = await this.$api.common.promotion('updateCardItem', {
							mobile:this.mobile,
							address_show:this.address_show,
							verify:this.verify,
							name:this.name,
							id_card:this.id_card,
							id:this.id,
							jhm:this.jhm,
							})
						if (res.code === 200) {
							this.$refs.popup.open('bottom')
						}

					
				}else{
					console.log('2222')
					this.cf=1
					console.log(this.cf)
					setTimeout(() => {
					this.cf=0
				},2000);
					
				}
			},
			close() {
				uni.$u.route('/pages/sojourn/sojourn')
						// this.$refs.popup.close()
					},
			agree(e){
				this.agree_v=e;
				this.tmd=1-(1-e)/2;
			},
			pt(){
				uni.$u.route(`/pages/login/protocol?tag=registeragreement`)
			},
			ys(){
				uni.$u.route(`/pages/login/protocol?tag=privacypolicy`)
				
			},
			// 获取省市区
			getAddress(params) {
				
			  
			  this.address_show = `${params.item_name1}${params.item_name2}${params.item_name3}`
			},
			showSelect() {
				this.$refs.address.showAddress({})
			},
			choose1(){
				uni.chooseImage({
					count:1,
					success:function (res) {
							console.log(res.tempFilePaths);
							this.zm=res.tempFilePaths[0]
						}
				})
			},
			choose2(){
				
			},
			// 获取验证码的方法
			    async getVerificationCode() {
					if(this.mobile.length!=11){
						uni.showToast({
							title:"请输入正确的11位手机号",
							duration:2000,
							icon:'none'
						})
						return
					}
					if(this.countdown>0){
						return
					}
					const res = await this.$api.common.promotion('send', {mobile:this.mobile})
					if (res.code === 200) {
					  // 模拟发送验证码的操作
					  // console.log('验证码已发送');
					  uni.showToast({
					  	title:res.message,
					  	duration:2000,
					  	icon:'none'
					  })
					  // 设置倒计时的秒数，如60秒
					  this.countdown = 60;
					  
					  // 设置倒计时
					  this.intervalId = setInterval(() => {
					    if (this.countdown > 0) {
					      this.countdown -= 1;
					    } else {
					      clearInterval(this.intervalId);
					    }
					  }, 1000);
					}
			      
			    }
		}
	}
</script>

<style lang="scss" scoped>
	 .centered {
	        position: absolute; /* 相对定位 */
	        top: 50%; /* 将元素向上移动自身高度的一半 */
	        left: 50%; /* 将元素向左移动自身宽度的一半 */
	        transform: translate(-50%, -50%); /* 根据自身大小调整位置 */
	    }
	.this_page{
			background: linear-gradient(to bottom,#E1B696,#FFFCF9);
			min-height: 100vh;
			
			.item {
			  width: 100%;
			  min-height: 96rpx;
			  padding: 24rpx 0;
			  border-bottom: 1rpx solid #f5f5f5;
			
			  .label {
			    width: 152rpx;
			  }
			
			  .uni-input-placeholder {
			    color: #999 !important;
			  }
			}
			
			.item:last-child {
			  display: flex;
			  padding-bottom: 52rpx;
			  border-bottom: 20rpx solid #f5f5f5;
			  flex-direction: column;
			}
			
			.cell {
			  width: 100%;
			  height: 96rpx;
			  margin-bottom: 100rpx;
			}
			
			
			
			.box-shadow {
			  box-shadow: 0rpx -4rpx 16rpx 0rpx rgba(0, 0, 0, 0.1);
			}
		}
	.card_out{
		width: 662rpx;
		padding: 12rpx;
		background: linear-gradient(to bottom right,#FFFBF5,#FCEBD9);
		border-radius: 12rpx;
		margin-left: auto;
		margin-right: auto;
	}
	.card_in{
		width: 660rpx;
		border-radius: 8rpx;
		border-color: #A96622 ;
		border-style: solid;
		border-width: 1rpx;
		margin-left: auto;
		margin-right: auto;
	}
	.card_text{
		width: 622rpx;
		margin: 20rpx;
		
	}
	.card_bottom{
		width: 100%;
		border-bottom:#F0D0B6 solid 1rpx ;
		height: 116rpx;
	}
	.text_big{
		font-weight: 600;
		line-height: 44rpx;
		font-size: 32rpx;
		color: #333333;
	}
	.text_sm{
		line-height: 40rpx;
		font-size: 28rpx;
	}
	
</style>
